<template>
  <div class="edit-layout data-edit-material">
    <back-button @click="store.backAction" />
    <div class="edit-layout-button-row">
      <cg-button @click="submitActionDispatch">提交</cg-button>
    </div>
    <div class="edit-layout-content-row">
      <cg-scrollbar wrap-height="max">
        <cg-form :fields="store.fields" :values="store.formData"
          @value-change="(key: string, value: any) => store.setFormValue(key, value)" />
      </cg-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import backButton from '../../../common/components/back-button.vue'
import layout from '../components/edit-layout'

defineOptions({
  name: 'data-edit-material'
})

const context = {
  data: {},
  components: {}
}
// { routeName, formData, fields, setFormValue, backAction, submitAction, init }
const store = layout(
  'material',
  context
)

const submitActionDispatch = () => {
  store.submitAction()

  if (store.routeName === 'material-create') {
    const materialKey = 'material-seed'
    let seed = Number(localStorage.getItem(materialKey))
    if (!(seed >= 0)) {
      seed = 0
    }
    localStorage.setItem(materialKey, '' + (seed + 1))
  }
}

onMounted(() => {
  store.init()
})
</script>

<style lang="scss"></style>
